<template>
    <el-form v-model="loginFrom" :rules="rules" class="login-container" ref="loginFrom" id="loginFrom">
        <h3 class="login-title">系统登录</h3>
        <el-form-item prop="uname">
            <el-input type="text" placeholder="请输入登录账号" v-model="loginFrom.uname"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
            <el-input type="password" placeholder="请输入登录密码" v-model="loginFrom.pwd"></el-input>
        </el-form-item>
        <el-checkbox class="login-rem" v-model="check">记住密码</el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-tag class="login-wang">忘记密码</el-tag>
        <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="mySub('loginFrom')">登&nbsp;&nbsp;录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
 name: 'Login',
    data() {
        return {
            rules: {
                uname: [
                    { required: true, message: "请输入账号信息", trigger: 'blur' }
                ],
                pwd: [
                { required: true, message: "请输入密码", trigger: 'blur' }
                ],
            },
            loginFrom: {
                uname: '',
                pwd: '',
                domains:[{
                    value: '' 
                }]
            },
            check: true
        }
    },
    methods:{
        mySub(myFrom){
            console.log(myFrom);
           // this.$ref[loginFrom].validate((valid)=>{
           //     if(valid){
           //         alert("你已经进入系统");
           //  }else{
           //      alert("信息不正确，请重新输入！")
           //  }
           // });
           this.$router.push('/home')
        }
    }
}
</script>

<style scoped>
.login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}

.login-title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

.login-rem {
    margin: 0px 0px 35px 0px;
    text-align: left;
}

.login-wang {
    margin: 15px 0px 35px 0px;
    text-align: left;
    font-size: small;
}
</style>
